<template>

	<div id="app">
		<v-app id="inspire">
			<!--加载子路由-->
			<div>
				<router-view> </router-view>
			</div>
			<!--底边导航栏-->
			<v-bottom-navigation app style="width: 100%">
				<v-col style="text-align:center;padding: 6px">
					<router-link :to="{ path: '/main/discover' }" tag="span" style="text-align:center;">
						<icon name="home" scale="2"></icon>
						<div class="font">
							首页
						</div>
					</router-link>
				</v-col>
				<v-col style="text-align:center;padding: 6px">
					<router-link :to="{ path: '/main/lease' }" tag="span">
						<icon name="lease" scale="2"></icon>
						<div>出租</div>
					</router-link>
				</v-col>
				<v-col style="text-align:center;padding: 6px">
					<router-link :to="{ path: '/main/shopping' }" tag="span">
						<icon name="shopping" scale="2"></icon>
						<div>商城</div>
					</router-link>
				</v-col>
				<v-col style="text-align:center;padding: 6px">
					<router-link :to="{ path: '/main/mine' }" tag="span">
						<icon name="mine" scale="2"></icon>
						<div>我的</div>
					</router-link>
				</v-col>
			</v-bottom-navigation>
		</v-app>
	</div>
</template>

<script>
	export default {
		name: "Main",
		data() {
			return {
			};
		}
	};
</script>

<style scoped>
	/* a {
  text-decoration: none;
} */
	/* .router-link-exact-active.router-link-active {
  text-align: center;
  width: 33%;
} */
	.router-link-active {
		text-decoration: none;
		color: #FF5252;
	}

	.v-bottom-navigation.v-item-group.theme--light.v-bottom-navigation--fixed {
		height: inherit!important;
	}

</style>
